<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Kekule Localization Resource Translator</title>
  <script>
    var __kekuleMarkLocalizationModuleInfo__ = true;
  </script>
  <link rel="stylesheet" type="text/css" href="../../widgets/themes/default/default.css"/>
  <link rel="stylesheet" type="text/css" href="../../widgets/themes/default/defaultColor.css"/>
  <script src="../../kekule.js?min=false"></script>
  <script src="../../localization/en/kekule.localize.extras.openbabel.en.js"></script>

  <script src="../../localization/zh/kekule.localize.general.zh.js"></script>
  <script src="../../localization/zh/kekule.localize.widget.zh.js"></script>

  <script src="../../_devUtils/localizationUtil/kekule.translators.js"></script>

  <style>
    #resInspector
    {
      width: 100%;
    }
    #resInspector .K-ValueListEditor-KeyCell
    {
      width: 50em;
    }
    #panelActiveItem
    {
      display: block;
    }
  </style>

  <script>
    var KL = Kekule.Localization;
    var TU = Kekule.Localization.TranslatorUtils;

    function $(id)
    {
      return document.getElementById(id);
    }

    var compNames = ['selectLanguage', 'selectModule', 'btnSave', 'resInspector'];
    var languages;
    var modules;
    function initWidgets()
    {
      for (var i = 0, l = compNames.length; i < l; ++i)
      {
        var name = compNames[i];
        window[name] = Kekule.Widget.getWidgetById(name);
      }
      resInspector.getPropEditor().setSortField(null);
      fillSelectBoxes();
      selectLanguage.addEventListener('valueChange', reloadRes);
      selectModule.addEventListener('valueChange', reloadRes);
      resInspector.addEventListener('activeRowChange', showActiveResInfo);
      btnSave.addEventListener('execute', saveContent);
      reloadRes();
    }

    function fillSelectBoxes()
    {
      selectLanguage.setItems(languages);
      selectModule.setItems(modules);
    }
    function getCurrLanguage()
    {
      return selectLanguage.getValue();
    }
    function getCurrModule()
    {
      return selectModule.getValue();
    }

    var currRes;
    function reloadRes()
    {
      var lan = getCurrLanguage();
      var module = selectModule.getValue();
      currRes = TU.createLocalModuleObj(lan, module);
      resInspector.setObjects(currRes /*resWrapper*/);
      resInspector.expandAllRows(true);
    }
    function showActiveResInfo()
    {
      var cascadeKey = getActiveResItemCascadeKey();
      $('keyActiveItem').innerHTML = cascadeKey;
      // enum all res string in other languages
      clearRefTexts();
      if (cascadeKey)
      {
        var currLan = getCurrLanguage();
        for (var i = 0, l = languages.length; i < l; ++i)
        {
          var lan = languages[i];
          if (lan !== currLan)
          {
            var text = Kekule.$L(cascadeKey, lan);
            addRefText(lan, text);
          }
        }
      }
    }
    function clearRefTexts()
    {
      var parent = $('refTextActiveItem');
      parent.innerHTML = '';
    }
    function addRefText(lan, text)
    {
      var parent = $('refTextActiveItem');
      var result = document.createElement('li');
      var str = '<span class="RefTextLan">[{0}]</span> <span class="RefTextContent">{1}</span>';
      str = str.format(lan, text);
      result.innerHTML = str;
      parent.appendChild(result);
      return result;
    }

    function getActiveResItemCascadeKey()
    {
      var cascadeKey = resInspector.getActiveRowCascadeKey();
      /*
      var resPropName = TU.getWrapperResourePropName();
      if (cascadeKey && cascadeKey.startsWith(resPropName + '.'))  // remove wrapper prop part (with '.')
      {
        cascadeKey = cascadeKey.substr(resPropName.length + 1);
      }
      */
      return cascadeKey;
    }

    function saveContent()
    {
      //console.log(currRes);
      var lan = getCurrLanguage();
      var module = getCurrModule();
      var text = TU.generateLocalModuleContent(lan, module, currRes);
      var fileName = 'kekule.localize.' + module + '.' + lan + '.js';
      //console.log(text);
      // open a dialog
      openSaveDialog(text, fileName);
    }

    function openSaveDialog(content, initialFileName)
    {
      var result = new Kekule.Widget.Dialog(document, 'Save localization resource file', ['ok', 'cancel']);
      var textEditor = new Kekule.Widget.TextEditor(result);
      textEditor.setValue(content);
      textEditor.getTextArea().setWidth('600px').setHeight('400px');
      textEditor.appendToWidget(result);
      result.openModal(function(dialogValue){
        if (dialogValue === 'ok')  // do save
        {
          Kekule.NativeServices.saveFileData(
            document, textEditor.getValue(), null, {'initialFileName': initialFileName}
          );
        }
        result.finalize();
      });
      return result;
    }

    function init()
    {
      languages = KL.getLanguages();
      modules = KL.getModuleNames();
      initWidgets();
    }
    Kekule.X.domReady(init);
  </script>
</head>
<body>
  <div>
    <select id="selectLanguage" data-widget="Kekule.Widget.SelectBox"></select>
    <select id="selectModule" data-widget="Kekule.Widget.SelectBox"></select>
    <span data-widget="Kekule.Widget.ButtonGroup">
      <button id="btnSave" data-widget="Kekule.Widget.Button">Save</button>
    </span>
  </div>
  <div>
    <div id="resInspector" data-widget="Kekule.Widget.ObjectInspector" data-resizable="true"></div>
  </div>
  <div id="panelActiveItem" data-widget="Kekule.Widget.Panel">
    <div id="keyActiveItem"></div>
    <ul id="refTextActiveItem"></ul>
  </div>
</body>
</html>